<template>
  <div>
    <a-modal
      v-model="visible"
      :footer="null"
      :closable="false"
      dialogClass="loginModal"
      width="700px"
    >
      <h4 class="titleH4">残疾人（无证）身份认证</h4>
      <div class="formData">
        <a-row>
          <a-col :span="16" class="item">
            <div class="label">身份证</div>
            <div class="content">
              <div
                style="display: inline-block; width: 140px; margin-right: 50px"
              >
                <a-upload
                  :disabled="!!userInfo"
                  name="filecontent"
                  list-type="picture-card"
                  class="avatar-uploader"
                  :show-upload-list="false"
                  action="/api/upload/img"
                  :before-upload="beforeUpload"
                  @change="handleChange($event, 'positiveimg')"
                >
                  <img
                    style="width: 120px; height: 102px"
                    v-if="positiveimg"
                    :src="imageWebUrl + positiveimg"
                    alt="avatar"
                  />
                  <div v-else>
                    <img
                      style="width: 120px"
                      src="@/assets/image/imageIdNumber.png"
                      alt="image"
                    />
                  </div>
                </a-upload>
                <p style="text-align: center; font-size: 12px; color: #999">
                  身份证正面
                </p>
              </div>
              <div style="display: inline-block; width: 140px">
                <a-upload
                  :disabled="!!userInfo"
                  name="filecontent"
                  list-type="picture-card"
                  class="avatar-uploader"
                  :show-upload-list="false"
                  action="/api/upload/img"
                  :before-upload="beforeUpload"
                  @change="handleChange($event, 'otherSideimg')"
                >
                  <img
                    style="width: 120px; height: 102px"
                    v-if="otherSideimg"
                    :src="imageWebUrl + otherSideimg"
                    alt="avatar"
                  />
                  <div v-else>
                    <img
                      style="width: 120px"
                      src="@/assets/image/imageIdNumber.png"
                      alt="image"
                    />
                  </div>
                </a-upload>
                <p style="text-align: center; font-size: 12px; color: #999">
                  身份证反面
                </p>
              </div>
            </div>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="11" class="item">
            <div class="label">姓名</div>
            <div class="content">
              <a-input
                :disabled="!!userInfo"
                size="large"
                v-model="name"
                placeholder="请输入姓名"
              />
            </div>
          </a-col>
          <a-col :span="11" class="item" :offset="2">
            <div class="label">身份证号</div>
            <div class="content">
              <a-input
                :disabled="!!userInfo"
                size="large"
                v-model="idCode"
                placeholder="请输入身份证号"
              />
            </div>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="11" class="item">
            <div class="label">残疾类别</div>
            <div class="content">
              <a-select
                placeholder="请选择残疾类别"
                style="width: 100%"
                @change="selectType"
              >
                <a-select-option
                  v-for="(item, index) in listTree"
                  :key="index"
                  :value="item.code"
                >
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </div>
          </a-col>
        </a-row>
        <a-row class="item">
          <div class="label">残疾证明资料</div>
          <p class="example">
            （例如：残疾评定机构证明、注明残疾人身份的政府补贴/社会保障证明）
          </p>
          <div class="content" style="display: flex">
            <div
              style="display: inline-block; width: 200px; margin-right: 50px"
            >
              <a-upload
                name="filecontent"
                list-type="picture-card"
                class="avatar-uploader"
                :show-upload-list="false"
                action="/api/upload/file"
                :before-upload="beforeUploadFile"
                @change="handleChangeFile($event, 'Disabilityfile')"
              >
                <p style="width: 200px; height: 102px" v-if="Disabilityfile">
                  {{ filename }}
                </p>
                <div v-else>
                  <img
                    style="width: 200px"
                    src="@/assets/image/employment/uploadFile.png"
                    alt="image"
                  />
                </div>
              </a-upload>
            </div>
            <div style="display: inline-block; width: 200px">
              <a-upload
                name="filecontent"
                list-type="picture-card"
                class="avatar-uploader"
                :show-upload-list="false"
                action="/api/upload/img"
                :before-upload="beforeUpload"
                @change="handleChange($event, 'Disabilityimg')"
              >
                <img
                  style="width: 200px; height: 102px"
                  v-if="Disabilityimg"
                  :src="imageWebUrl + Disabilityimg"
                  alt="avatar"
                />
                <div v-else>
                  <img
                    style="width: 200px"
                    src="@/assets/image/employment/uploadImage.png"
                    alt="image"
                  />
                </div>
              </a-upload>
            </div>
          </div>
        </a-row>
        <a-row class="item">
          <div class="label">备注（选填）</div>
          <div class="content">
            <a-textarea
              size="large"
              v-model="disaAuthDesc"
              :maxLength="200"
              placeholder="简单描述您目前的身体状况（200字以内）"
            />
          </div>
        </a-row>
        <a-row>
          <a-col :span="24" class="item">
            <div class="content">
              <p
                style="
                  font-size: 13px;
                  line-height: 18px;
                  color: #999999;
                  padding: 24px 0 0;
                "
              >
                <span style="color: #ca0000">注</span
                >：请如实填写您的残疾人认证信息，平台会对您提交的信息进行核验。核验通过后，平台将以短信形式通知您，请注意查收。
              </p>
            </div>
          </a-col>
        </a-row>
      </div>
      <!-- 操作 -->
      <div class="operation">
        <a-button
          size="large"
          style="margin-right: 50px"
          @click="visible = false"
          >取消</a-button
        >
        <a-button size="large" type="primary" @click="authentic">认证</a-button>
      </div>
    </a-modal>
    <a-modal
      :closable="false"
      style="width: 550px"
      dialogClass="success"
      :maskClosable="false"
      :visible="successvisible"
    >
      <template #footer>
        <a-button size="large" type="primary" @click="successOk"
          >我知道了</a-button
        >
      </template>
      <template #title>
        <a-icon style="color: #ffbe37" type="info-circle" />
        <span style="display: inline-block; margin-left: 10px; color: #333333"
          >提示信息</span
        >
      </template>
      <div class="successModel">
        <span>已成功提交认证信息，请等待审核。</span>
      </div>
    </a-modal>
  </div>
</template>
<script>
function isIdCard(idCard) {
  // 15位和18位身份证号码的正则表达式
  var regIdCard =
    /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;

  // 如果通过该验证，说明身份证格式正确，但准确性还需计算
  if (regIdCard.test(idCard)) {
    if (idCard.length == 18) {
      var idCardWi = new Array(
        7,
        9,
        10,
        5,
        8,
        4,
        2,
        1,
        6,
        3,
        7,
        9,
        10,
        5,
        8,
        4,
        2
      ); // 将前17位加权因子保存在数组里
      var idCardY = new Array(1, 0, 10, 9, 8, 7, 6, 5, 4, 3, 2); // 这是除以11后，可能产生的11位余数、验证码，也保存成数组
      var idCardWiSum = 0; // 用来保存前17位各自乖以加权因子后的总和
      for (var i = 0; i < 17; i++) {
        idCardWiSum += idCard.substring(i, i + 1) * idCardWi[i];
      }

      var idCardMod = idCardWiSum % 11; // 计算出校验码所在数组的位置
      var idCardLast = idCard.substring(17); // 得到最后一位身份证号码

      // 如果等于2，则说明校验码是10，身份证号码最后一位应该是X
      if (idCardMod == 2) {
        if (idCardLast == "X" || idCardLast == "x") {
          //alert("恭喜通过验证啦！");
          return true;
        } else {
          //alert("身份证号码错误！");
          return false;
        }
      } else {
        // 用计算出的验证码与最后一位身份证号码匹配，如果一致，说明通过，否则是无效的身份证号码
        if (idCardLast == idCardY[idCardMod]) {
          //alert("恭喜通过验证啦！");
          return true;
        } else {
          //alert("身份证号码错误！");
          return false;
        }
      }
    } else {
      return true;
    }
  } else {
    //alert("身份证格式不正确!");
    return false;
  }
}
export default {
  data() {
    return {
      userInfo: null,
      successvisible: false,
      visible: false,
      listTree: [], //残疾类别
      positiveimg: "", // 身份证正面
      otherSideimg: "", // 身份证反面
      Disabilityimg: "", //残疾证明照片
      Disabilityfile: "", //残疾证明文件
      filename: "", //残疾证明文件名
      name: "", //姓名
      idCode: "", //身份证号
      disaType: null, //残疾类别
      disaAuthDesc: "", // 残疾说明
    };
  },
  watch: {
    userInfo(newVal) {
      this.userInfo = newVal;
      // 身份证图片赋值
      for (let i = 0; i < this.userInfo.imageList.length; i++) {
        if (this.userInfo.imageList[i].imgSubType == 1) {
          this.positiveimg = this.userInfo.imageList[i].imgPath;
        } else if (this.userInfo.imageList[i].imgSubType == 2) {
          this.otherSideimg = this.userInfo.imageList[i].imgPath;
        }
      }
      // 姓名
      this.name = this.userInfo.name;
      // 身份证号
      this.idCode = this.userInfo.idNo;
    },
  },
  methods: {
    successOk() {
      this.$emit("closeflag");
      this.visible = false;
      this.successvisible = false;
    },
    //   残疾类别
    selectType(e) {
      this.disaType = e;
    },
    // 获取残疾类别、等级数组
    getlist() {
      this.$ajax({
        url: "/news/code/list/name?codeType=1",
        method: "post",
      }).then((res) => {
        if (res.code == 200) {
          this.listTree = res.data;
        }
      });
    },
    // 文件上传
    beforeUploadFile(file) {
      // const isJpgOrPng =
      //   file.type === "image/docx" || file.type === "image/png";
      // if (!isJpgOrPng) {
      //   this.$message.error("You can only upload JPG file!");
      // }
      // const isLt2M = file.size / 1024 / 1024 < 2;
      // if (!isLt2M) {
      //   this.$message.error("上传的图片最大为2MB!");
      // }
      // return isLt2M;
    },
    handleChangeFile(info, e) {
      // console.log(this.filename);
      if (
        info.file.status == "done" &&
        info.fileList &&
        info.fileList[info.fileList.length - 1].response.code == 200
      ) {
        this[e] = info.fileList[info.fileList.length - 1].response.data;
        this.filename = info.fileList[info.fileList.length - 1].name;
      } else if (
        info.file.status == "done" &&
        info.fileList &&
        info.fileList[info.fileList.length - 1].response.code != 200
      ) {
        this.$message.error(
          info.fileList[info.fileList.length - 1].response.msg
        );
        info = null;
      }
    },
    // 图片上传
    beforeUpload(file) {
      const isJpgOrPng =
        file.type === "image/jpeg" || file.type === "image/png";
      if (!isJpgOrPng) {
        this.$message.error("请上传png、jpeg、jpg格式的头像!");
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传的图片最大为2MB!");
      }
      return isJpgOrPng && isLt2M;
    },
    handleChange(info, e) {
      // console.log(info);
      if (
        info.file.status == "done" &&
        info.fileList &&
        info.fileList[info.fileList.length - 1].response.code == 200
      ) {
        this[e] = info.fileList[info.fileList.length - 1].response.data;
        // console.log(this[e]);
      } else if (
        info.file.status == "done" &&
        info.fileList &&
        info.fileList[info.fileList.length - 1].response.code != 200
      ) {
        this.$message.error(
          info.fileList[info.fileList.length - 1].response.msg
        );
      }
    },
    // 残疾人无证认证
    authentic() {
      if (!this.name) {
        this.$message.error("请输入姓名");
      } else if (!this.idCode) {
        this.$message.error("请输入身份证号");
      } else if (!isIdCard(this.idCode)) {
        this.$message.error("请输入正确的身份证号");
      } else if (!this.disaType) {
        this.$message.error("请选择残疾类别");
      } else if (!this.positiveimg) {
        this.$message.error("请上传身份证正面照片");
      } else if (!this.otherSideimg) {
        this.$message.error("请上传身份证反面照片");
      } else if (!(this.Disabilityimg || this.Disabilityfile)) {
        this.$message.error("请上传残疾证明资料");
      } else {
        let userImageJson = [];
        // 身份证正面
        userImageJson.push({
          imgPath: this.positiveimg,
          imgSubType: 1,
          imgType: 1,
        });
        // 身份证反面
        userImageJson.push({
          imgPath: this.otherSideimg,
          imgSubType: 2,
          imgType: 1,
        });
        // 残疾证明图片
        userImageJson.push({
          imgPath: this.Disabilityimg,
          imgType: 4,
        });
        // 残疾证明文件
        userImageJson.push({
          imgPath: this.Disabilityfile,
          imgType: 5,
          imgName: this.filename,
        });
        this.$ajax({
          url: "/user/userinfo/user/authentic",
          method: "post",
          params: {
            name: this.name,
            idNo: this.idCode,
            disaAuthFlag: "N",
            voluntAuthFlag: "N",
            disaAuthDesc: this.disaAuthDesc,
            disaType: this.disaType,
            userImageJson: JSON.stringify(userImageJson),
          },
        }).then((res) => {
          if (res.code == 200) {
            this.successvisible = true;
          } else {
            this.$message.error(res.msg);
          }
        });
      }
    },
  },
  created() {
    this.getlist();
  },
};
</script>

<style lang="less" scoped>
/deep/.ant-upload.ant-upload-select-picture-card > .ant-upload {
  padding: 0;
}
/deep/.loginModal {
  .ant-modal-body {
    padding: 38px !important;
    padding-bottom: 48px !important;
  }
  .titleH4 {
    font-size: 20px;
    line-height: 28px;
    text-align: center;
  }
  .item {
    .example {
      color: #666666;
      font-size: 13px;
      line-height: 18px;
      margin-bottom: 16px;
    }
    .label {
      padding-top: 24px;
      padding-bottom: 16px;
      &::after {
        content: "：";
      }
    }
  }
  .operation {
    text-align: center;
    margin-top: 48px;
    button {
      width: 110px;
    }
  }
}
</style>
